import React from 'react';
import style from './style.styl';
import {Button, Input, Select, error} from '../../../../ui-components';
import util from '../../../../util';
import listStyle from '../plugins/style.reviewList.styl';
import cx from 'classnames';


import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as reviewAction from '../../../../actions/review.action' 

import SelfProjectItem from './SelfProjectItem';
import ProjectCreate from './ProjectCreate';

@connect(null, dispatch => ({actions: bindActionCreators({...reviewAction}, dispatch)}))
class SelfProject extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'SelfProject';
    this.state = {
      isCreate: false,
      isDisabled: {},
    }
  }
  getViod = () => {
    return (
      <div className={cx({
        [listStyle['review-void']]: true,
        [style['review-void']]: true,
      })}>
        <img src={`/${util.getImagePath()}/default/review-void.png`}/>
        <p>请逐一添加您的工作项目，展示工作成果，帮助您的同事更好地给予反馈。</p>
        <Button className={listStyle['button']} label={'添加自评项目'} onClick={this.toggleCreate.bind(this, true)}/>
      </div>
    );
  }
  setShow = (projectId, flag) => {
    this.setState({
      isDisabled: {
        ...this.state.isDisabled,
        [projectId]: flag,
      }
    });
  }
  getList = (projects,isCreate) => {
    const {
      activityId
    } = this.props;
    const list = projects.map((v, i) => {
      return (
        <div key={v.projectId} className={style['create-project-box']}>
          <SelfProjectItem ref={`item-${i}`}  id={activityId} index={i} viewMode={'activities'} setShow={this.setShow} actions={this.props.actions}  item={v} />
        </div>
      )
    });
    return (
      <div style={{marginTop: '-24px'}}>
        {list}
        {
          isCreate ? null :
          <Button className={style['a-btn']} blueLine label={'添加自评项目'} onClick={this.toggleCreate.bind(this, true)}/>
        }
      </div>
    );
  }
  /**
   * 新增项目
   * @param  {[type]} item [description]
   * @return {[type]}      [description]
   */
  getItem = (item) => {
    return (
      <div style={{marginBottom: '10px'}}>
        <ProjectCreate item={item} cancel={this.toggleCreate.bind(this, false)} submit={this.createProject} />
      </div>
    );
  }
  toggleCreate = (flag) => {
    this.setState({
      isCreate: flag,
    });
  }
  createProject = (fields) => {
    const {
      activityId
    } = this.props;
    this.props.actions.createReviewProject(activityId, fields, ()=>{
      this.toggleCreate();
    })
  }
  goNext = () => {
    this.props.tabRouter && this.props.tabRouter(2);
  }
  render() {
    const {
      projects
    } = this.props;
    const {
      isCreate,
      isDisabled
    } = this.state;
    let disabled = isCreate;
    for(const key in isDisabled){
      disabled = disabled || isDisabled[key];
    }
    return (
      <div>
        {
          !projects.length && !isCreate ? this.getViod() : isCreate && !projects.length ? null :  this.getList(projects,isCreate)
        }
        {
          isCreate ? this.getItem() : null
        }
        <div className={style['btn-bar']}>
          <Button label={'下一步'} disabled={disabled} className={style['r-btn']} onClick={this.goNext} />
        </div>
      </div>
    );
  }
}

export default SelfProject;
